<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
  <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>

  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    <avue-crud :option="option" :data="data">
      <div slot-scope="scope" slot="inputForm">
        <el-tag>{{scope.row.$index}}</el-tag>
      </div>
    </avue-crud>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        data: [{
          input: 1,
          tree: 1,
          dynamic: [{
            input: 1,
            select: 1,
            radio: 1,
          }, {
            input: 2,
            select: 2,
            radio: 1,
          }]
        }],
        option: {
          labelWidth: 110,
          column: [{
            label: '树型',
            prop: "tree",
            type: 'tree',
            dicData: [{
              label: '1-1',
              value: 0,
              children: [{
                label: "2-1",
                value: 1
              }]
            }]
          },
          {
            label: '子表单',
            prop: 'dynamic',
            type: 'dynamic',
            span: 16,
            span: 24,
            children: {
              height: 300,
              align: 'center',
              headerAlign: 'center',
              column: [{
                width: 200,
                label: '输入框',
                prop: "input",
                formslot: true,
                rules: [
                  {
                    required: true,
                    message: '必填项测试',
                    trigger: 'blur'
                  }
                ]
              }, {
                width: 200,
                label: '密码框',
                prop: "password",
                type: 'password'
              }, {
                width: 200,
                label: '树型',
                prop: "tree",
                type: 'tree',
                dicData: [{
                  label: '1-1',
                  value: 0,
                  children: [{
                    label: "2-1",
                    value: 1
                  }]
                }]
              }, {
                width: 200,
                label: '选择框',
                prop: "select",
                type: 'select',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '多选',
                prop: "checkbox",
                type: 'checkbox',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '开关',
                prop: "switch",
                type: 'switch',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '数字框',
                prop: "number",
                type: 'number'
              }]
            },
          },

          ]
        }
      }
    }
  })
</script>

</html>